<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件派遣</title>
        <style type="text/css">
            .file-wrapper {
                display: flex;
                margin: auto ;
                border: 1px solid blue ;
                width: 400px;
                height: 50px;
                line-height: 50px;
            }
            .file-wrapper input[type=file] {
                display: none ;
            }
            .file-wrapper>.file-selector {
                flex-basis: 80%;
            }
            .file-wrapper>.file-upload {
                flex-basis: 20%;
            }
        </style>
    </head>
    <body>

        <div class="file-wrapper">
            <input type="file" >
            <span class="file-selector">请选择上传的文件</span>
            <span class="file-upload">上传</button>
        </div>

        <script type="text/javascript">
            (function(){

                const name = '选择文件' ;
                const dispatcher = new EventTarget(); // document.createElement( 'div' );

                const fileInput = document.querySelector( '.file-wrapper>input[type=file]' );
                const fileSelector = document.querySelector( '.file-selector' );
                const fileUpload = document.querySelector( '.file-upload' );

                const handler = evt => {
                    console.log( evt );
                    // 当自定义事件被触发时，就调用 input 的 click 函数从而触发文件选择操作
                    fileInput.click();
                }

                // 为 dispatcher 绑定一个自定义事件的监听器
                dispatcher.addEventListener( name , handler , false );

                fileSelector.addEventListener( 'click' , e => {
                    // 创建自定义事件
                    let evt = new Event( name );
                    // 触发自定义事件
                    dispatcher.dispatchEvent( evt ); // 事件派遣
                } , false );

                fileInput.addEventListener( 'change' , e => {
                    //  移除自定义的事件监听器
                    dispatcher.removeEventListener( name , handler );
                    console.dir( e.target );
                    let file = e.target.files[ 0 ];
                    fileSelector.innerHTML = file.name ;
                } , false );

                fileUpload.addEventListener( 'click' , e=>{
                    let $http = new XMLHttpRequest();
                    $http.addEventListener( 'readystatechange' , e => {
                        if( $http.readyState === $http.DONE ) {
                            // 将响应信息显示到页面上
                            console.log( $http.response );
                        }
                    } , false );
                    // 这里的上传路径是假的，需要你自己实现
                    // 这里可能存在跨域问题
                    let url = '/upload' ; // 后端路由
                    $http.open( 'post' , url );
                    let formData = new FormData();
                    formData.append( 'upfile' , fileInput.files[ 0 ] );
                    $http.send( formData );
                } , false );
            })();
        </script>
        
    </body>
</html>